<template>
	<div class="header">
		<!-- 折叠按钮 -->
		<div class="collapse-btn" @click="collapseChage">
			<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
			<el-icon v-else><Fold /></el-icon>
		</div>
		<div class="logo">闽侯烟草案件管理平台</div>
		<div class="header-right">
			<div class="header-user-con">
				<!-- 消息中心 -->
<!--				<div class="btn-bell" @click="router.push('/tabs')">-->
<!--					<el-tooltip-->
<!--						effect="dark"-->
<!--						:content="message ? `有${message}条未读消息` : `消息中心`"-->
<!--						placement="bottom"-->
<!--					>-->
<!--						<i class="el-icon-lx-notice"></i>-->
<!--					</el-tooltip>-->
<!--					<span class="btn-bell-badge" v-if="message"></span>-->
<!--				</div>-->
				<!-- 用户头像 -->
				<el-avatar class="user-avator" :size="30" :src="imgurl" onclick="message_revise"  />
				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{ real_name }}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item divided command="message_revise">信息修改</el-dropdown-item>
						</el-dropdown-menu>
						<el-dropdown-menu>
							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
	<el-dialog title="个人信息修改" v-model="Personal_information_Visible" width="55%">
		<el-form ref="form"  :model="form" label-width="100px">
			<el-row>
				<el-col :span="8">
					<el-form-item label="姓名">
						<el-input v-model="user_data.staff_name" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="账号">
						<el-input v-model="user_data.staff_account_no" :disabled="true"></el-input>
					</el-form-item>
				</el-col >

				<el-col :span="8">
					<el-form-item label="密码" >
						<el-input v-model="user_data.staff_account_pwd"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="8">
					<el-form-item label="出生日期">
						<el-date-picker v-model="user_data.staff_birthday"  type="datetime" placeholder="请选择出生日期" value-format="YYYY-MM-DD HH:mm:ss">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="性别">
						<el-select v-model="user_data.staff_gender"  placeholder="请选择" class="handle-select mr10">
							<el-option key="1" label="男" value="男" ></el-option>
							<el-option key="2" label="女" value="女"></el-option>
						</el-select>
					</el-form-item>
				</el-col >

				<el-col :span="8">
					<el-form-item label="民族">
						<el-select v-model="user_data.staff_ethnicity"  placeholder="请选择" class="handle-select mr10">
							<el-option key="1" label="汉族" value="汉族"></el-option>
							<el-option key="2" label="蒙古族" value="蒙古族"></el-option>
							<el-option key="3" label="回族" value="回族"></el-option>
							<el-option key="4" label="藏族" value="藏族"></el-option>
							<el-option key="5" label="维吾尔族" value="维吾尔族"></el-option>
							<el-option key="6" label="苗族" value="苗族"></el-option>
							<el-option key="7" label="彝族" value="彝族"></el-option>
							<el-option key="8" label="壮族" value="壮族"></el-option>
							<el-option key="9" label="布依族" value="布依族"></el-option>
							<el-option key="10" label="朝鲜族" value="朝鲜族"></el-option>
							<el-option key="11" label="满族" value="满族"></el-option>
							<el-option key="12" label="侗族" value="侗族"></el-option>
							<el-option key="13" label="瑶族" value="瑶族"></el-option>
							<el-option key="14" label="白族" value="白族"></el-option>
							<el-option key="15" label="土家族" value="土家族"></el-option>
							<el-option key="16" label="哈尼族" value="哈尼族"></el-option>
							<el-option key="17" label="哈萨克族" value="哈萨克族"></el-option>
							<el-option key="18" label="傣族" value="傣族"></el-option>
							<el-option key="19" label="黎族" value="黎族"></el-option>
							<el-option key="20" label="傈僳族" value="傈僳族"></el-option>
							<el-option key="21" label="佤族" value="佤族"></el-option>
							<el-option key="22" label="畲族" value="畲族"></el-option>
							<el-option key="23" label="高山族" value="高山族"></el-option>
							<el-option key="24" label="拉祜族" value="拉祜族"></el-option>
							<el-option key="25" label="水族" value="水族"></el-option>
							<el-option key="26" label="东乡族" value="东乡族"></el-option>
							<el-option key="27" label="纳西族" value="纳西族"></el-option>
							<el-option key="28" label="景颇族" value="景颇族"></el-option>
							<el-option key="29" label="柯尔克孜族" value="柯尔克孜族"></el-option>
							<el-option key="30" label="土族" value="土族"></el-option>
							<el-option key="31" label="达斡尔族" value="达斡尔族"></el-option>
							<el-option key="32" label="仫佬族" value="仫佬族"></el-option>
							<el-option key="33" label="羌族" value="羌族"></el-option>
							<el-option key="34" label="布朗族" value="布朗族"></el-option>
							<el-option key="35" label="撒拉族" value="撒拉族"></el-option>
							<el-option key="36" label="毛南族" value="毛南族"></el-option>
							<el-option key="37" label="仡佬族" value="仡佬族"></el-option>
							<el-option key="38" label="锡伯族" value="锡伯族"></el-option>
							<el-option key="39" label="阿昌族" value="阿昌族"></el-option>
							<el-option key="40" label="普米族" value="普米族"></el-option>
							<el-option key="41" label="塔吉克族" value="塔吉克族"></el-option>
							<el-option key="42" label="怒族" value="怒族"></el-option>
							<el-option key="43" label="乌孜别克族" value="乌孜别克族"></el-option>
							<el-option key="44" label="俄罗斯族" value="俄罗斯族"></el-option>
							<el-option key="45" label="鄂温克族" value="鄂温克族"></el-option>
							<el-option key="46" label="德昂族" value="德昂族"></el-option>
							<el-option key="47" label="保安族" value="保安族"></el-option>
							<el-option key="48" label="裕固族" value="裕固族"></el-option>
							<el-option key="49" label="京族" value="京族"></el-option>
							<el-option key="50" label="塔塔尔族" value="塔塔尔族"></el-option>
							<el-option key="51" label="独龙族" value="独龙族"></el-option>
							<el-option key="52" label="鄂伦春族" value="鄂伦春族"></el-option>
							<el-option key="53" label="赫哲族" value="赫哲族"></el-option>
							<el-option key="54" label="门巴族" value="门巴族"></el-option>
							<el-option key="55" label="珞巴族" value="珞巴族"></el-option>
							<el-option key="56" label="基诺族" value="基诺族"></el-option>

						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="8">
					<el-form-item label="学历">
						<el-select v-model="user_data.staff_edu_bg"  placeholder="请选择" class="handle-select mr10">
							<el-option key="1" label="博士研究生" value="博士研究生" ></el-option>
							<el-option key="2" label="硕士研究生" value="硕士研究生"></el-option>
							<el-option key="3" label="中央党校研究生" value="中央党校研究生" ></el-option>
							<el-option key="4" label="省(市、区)委党校研究生" value="省(市、区)委党校研究生"></el-option>
							<el-option key="5" label="大学本科" value="大学本科" ></el-option>
							<el-option key="6" label="中央党校大学" value="中央党校大学"></el-option>
							<el-option key="7" label="大专" value="大专" ></el-option>

						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="政治面貌" >
						<el-select v-model="user_data.staff_political_status"  placeholder="请选择" class="handle-select mr10">
							<el-option key="1" label="群众" value="群众" ></el-option>
							<el-option key="2" label="共青团员" value="共青团员"></el-option>
							<el-option key="3" label="中共党员" value="中共党员" ></el-option>
							<el-option key="4" label="中共预备党员" value="中共预备党员"></el-option>
							<el-option key="5" label="民革党员" value="民革党员" ></el-option>

						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="职级">
						<el-input v-model="user_data.staff_degree" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="身份证号">
						<el-input v-model="user_data.field_staff_identity_card" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邮箱">
						<el-input v-model="user_data.staff_email"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="籍贯" >
				<el-input v-model="user_data.staff_hometown"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="8">
					<el-form-item label="参加工作时间">
						<el-date-picker v-model="user_data.staff_starting_time"  type="datetime" placeholder="参加工作时间" value-format="YYYY-MM-DD HH:mm:ss">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="岗位" >
						<el-input v-model="user_data.staff_post" :disabled="true"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="编制">
						<el-select v-model="user_data.staff_authorized" :disabled="true" placeholder="请选择" class="handle-select mr10">
							<el-option key="1" label="在编" value="在编" ></el-option>
							<el-option key="2" label="非在编" value="非在编"></el-option>
						</el-select>
					</el-form-item>
				</el-col >
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="执法证号">
						<el-input v-model="user_data.staff_license_no" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="手机号码">
						<el-input v-model="user_data.staff_phone"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="电话">
						<el-input v-model="user_data.staff_tel"></el-input>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="鉴定证书编号">
						<el-input v-model="user_data.staff_identity_license_no" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">

					<el-form-item label="聘任等级">
						<el-input v-model="user_data.staff_now_work_degree" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="鉴定等级">
						<el-input v-model="user_data.staff_now_evaluate_degree" :disabled="true"></el-input>
					</el-form-item>
				</el-col>

			</el-row>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="Personal_information_Visible = false">取 消</el-button>
	<el-button color="#00a854" type="primary" @click="certain_personal_information">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	</div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRouter } from 'vue-router';
import imgurl from '../assets/img/image_tobacco.png';
import {fetchData_case_update, fetchData_inquiry_record_Confirm, fetchData_user_realMessage, Save_personal_information_Confirm} from '../api';
import {ElMessage, ElMessageBox} from "element-plus";
const Personal_information_Visible=ref(false);//查看个人信息页面
// const username=localStorage.getItem('ms_username');
const username: string | null = localStorage.getItem('ms_username');
const staff_account_no=localStorage.getItem('ms_username');
const message: number = 2;
const real_name: string | null=localStorage.getItem('real_name');
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
	sidebar.handleCollapse();
};

onMounted(() => {
	if (document.body.clientWidth < 1500) {
		collapseChage();
	}
});

const items = [
	{
		index: '/user_message',
		title: '个人信息'
	}]

const user_data = reactive({
	staff_name:'',
	staff_gender:'',
	staff_birthday:'',
	staff_ethnicity:'',
	staff_edu_bg:'',
	staff_email:'',
	field_staff_identity_card:'',
	staff_hometown:'',
	staff_degree:'',
	staff_political_status:'',
	staff_post:'',
	staff_account_no:'',
	staff_account_pwd:'',
	staff_starting_time:'',
	staff_authorized:'',
	staff_phone:'',
	staff_tel:'',
	staff_e_sign:'',
	staff_small_number:'',
	staff_license_no:'',
	staff_now_work_degree:'',
	staff_now_evaluate_degree:'',
	staff_identity_license_no:'',
});
// function myFunction(arg: string | undefined) {
// }
// myFunction(username as string | undefined);

const get_user_realMessage=(username:string | undefined)=>{
	fetchData_user_realMessage(username).then(res=>{
		user_data.staff_name=res.data.data.staff_name;
		user_data.staff_gender=res.data.data.staff_gender;
		user_data.staff_birthday=res.data.data.staff_birthday;
		user_data.staff_ethnicity=res.data.data.staff_ethnicity
		user_data.staff_edu_bg=res.data.data.staff_edu_bg
		user_data.staff_email=res.data.data.staff_email
		user_data.field_staff_identity_card=res.data.data.field_staff_identity_card
		user_data.staff_hometown=res.data.data.staff_hometown
		user_data.staff_degree=res.data.data.staff_degree
		user_data.staff_political_status=res.data.data.staff_political_status
		user_data.staff_post=res.data.data.staff_post
		user_data.staff_account_no=res.data.data.staff_account_no
		user_data.staff_account_pwd=res.data.data.staff_account_pwd;
		user_data.staff_starting_time=res.data.data.staff_starting_time
		user_data.staff_authorized=res.data.data.staff_authorized
		user_data.staff_phone=res.data.data.staff_phone
		user_data.staff_tel=res.data.data.staff_tel
		user_data.staff_e_sign=res.data.data.staff_e_sign
		user_data.staff_small_number=res.data.data.staff_small_number
		user_data.staff_license_no=res.data.data.staff_license_no
		user_data.staff_now_work_degree=res.data.data.staff_now_work_degree
		user_data.staff_now_evaluate_degree=res.data.data.staff_now_evaluate_degree
		user_data.staff_identity_license_no=res.data.data.staff_identity_license_no

	})
}
//保存修改的个人信息
const certain_personal_information=()=>{
	Save_personal_information_Confirm(
		user_data.staff_name,
		user_data.staff_gender,
		user_data.staff_birthday,
		user_data.staff_ethnicity,
		user_data.staff_edu_bg,
		user_data.staff_email,
		user_data.field_staff_identity_card,
		user_data.staff_hometown,
		user_data.staff_degree,
		user_data.staff_political_status,
		user_data.staff_post,
		user_data.staff_account_no,
		user_data.staff_account_pwd,
		user_data.staff_starting_time,
		user_data.staff_authorized,
		user_data.staff_phone,
		user_data.staff_tel,
		user_data.staff_identity_license_no,
		user_data.staff_license_no,
		user_data.staff_now_work_degree,
		user_data.staff_now_evaluate_degree,
	).then(res=>{
		if (res.data.message === "success"){
			ElMessage.success('修改成功');
			Personal_information_Visible.value = false;

		}else {
			ElMessageBox.confirm('状态更新失败', '提示', {
				type: 'warning'
			})
		}
	})
}

// 用户名下拉菜单选择事件
const router = useRouter();
const handleCommand = (command: string) => {
	if (command == 'loginout') {
		localStorage.removeItem('ms_username');
		router.push('/login');
	} else if (command == 'user') {
		router.push('/user');
	}else if(command=='message_revise'){
		get_user_realMessage(username as string | undefined);
		Personal_information_Visible.value=true;
		fetchData_user_realMessage(username as string | undefined);
	}
};




</script>
<style scoped>
.header {
	position: relative;
	box-sizing: border-box;
	top: 0%;
	width: 100%;
	height: 9.8%;
	font-size: 12px;
	color: #fff;
	background-image: url(../assets/img/background1.png);
}
.collapse-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 44%;
	float: left;
	/*padding:0 2%;*/
	cursor: pointer;
	font-size: 22px;
	padding: 1.2% 1.35% 1.35% 1.35%;
}

.logo {
	float: left;
	width: 70%;
	line-height: 50%;
	padding: 1.9% 0 0 0;
	font-size: 22.5px;
}
.header-right {
	float: right;
	padding-right: 5%;
}
.header-user-con {
	display: flex;
	/*padding-top: 20%;*/
	height: 30%;
	align-items: center;
	padding: 15% 0% 0% 0%;
}
.btn-fullscreen {
	transform: rotate(45deg);
	margin-right: 5px;
	font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
	position: relative;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.btn-bell-badge {
	position: relative;
	right: 4px;
	top: 0px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #f56c6c;
	color: #fff;
}
.btn-bell .el-icon-lx-notice {
	color: #fff;
}
.user-name {
	margin-top: 10%;
	margin-left:0%;
	left: 5%;
}
.user-avator {
	margin-left:0%;
	margin-height: 0%;
	margin-top: 8%;
}
.el-dropdown-link {
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.el-dropdown-menu__item {
	text-align: center;
}
</style>
